<template>
  <div class="data-list-container">
    <el-form :inline="true" label-width="80px" class="search-form">
      <el-form-item label="Sender">
        <el-input v-model="searchParams.sender" placeholder="请输入发送方"></el-input>
      </el-form-item>
      <el-form-item label="Receiver">
        <el-input v-model="searchParams.receiver" placeholder="请输入接收方"></el-input>
      </el-form-item>
      <el-form-item label="Cost">
        <el-input v-model="searchParams.cost" placeholder="请输入费用"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="success" @click="openDialog">新增交易</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="sender" label="Sender"></el-table-column>
      <el-table-column prop="receiver" label="Receiver"></el-table-column>
      <el-table-column prop="cost" label="Cost"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handlePageChange"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="prev, pager, next"
      :total="pagination.total">
    </el-pagination>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="新增/编辑交易">
      <el-form :model="currentTransaction">
        <el-form-item label="Sender">
          <el-input v-model="currentTransaction.sender"></el-input>
        </el-form-item>
        <el-form-item label="Receiver">
          <el-input v-model="currentTransaction.receiver"></el-input>
        </el-form-item>
        <el-form-item label="Cost">
          <el-input v-model="currentTransaction.cost"></el-input>
        </el-form-item>
      </el-form>
      <!-- 修改后的footer写法 -->
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const searchParams = reactive({
  sender: '',
  receiver: '',
  cost: ''
});

const tableData = ref([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const dialogVisible = ref(false);
const currentTransaction = reactive({
  id: '',
  sender: '',
  receiver: '',
  cost: ''
});

const fetchData = async () => {
  try {
    const response = await axios.get('http://localhost:9900/data/list', {
      params: {
        pageNum: pagination.currentPage,
        pageSize: pagination.pageSize,
        sender: searchParams.sender,
        receiver: searchParams.receiver,
        cost: searchParams.cost
      }
    });
    if (response.data.code === 200) {
      tableData.value = response.data.data.records || [];
      pagination.total = response.data.data.total || 0;
    } else {
      ElMessage.error(response.data.msg || '查询失败');
    }
  } catch (error) {
    ElMessage.error('数据加载失败');
  }
};

const handleSearch = () => {
  pagination.currentPage = 1;
  fetchData();
};

const handlePageChange = (newPage) => {
  pagination.currentPage = newPage;
  fetchData();
};

const openDialog = () => {
  currentTransaction.id = '';
  currentTransaction.sender = '';
  currentTransaction.receiver = '';
  currentTransaction.cost = '';
  dialogVisible.value = true;
};

const handleEdit = async (row) => {
  try {
    const response = await axios.get(`http://localhost:9900/data/select/${row.id}`);
    if (response.data.code === 200) {
      Object.assign(currentTransaction, response.data.data);
      dialogVisible.value = true;
    } else {
      ElMessage.error(response.data.msg || '加载数据失败');
    }
  } catch (error) {
    ElMessage.error('加载数据失败');
  }
};

const handleSave = async () => {
  try {
    let response;
    if (currentTransaction.id) {
      response = await axios.put(`http://localhost:9900/data/update`, currentTransaction);
    } else {
      response = await axios.post(`http://localhost:9900/data/add`, currentTransaction);
    }

    if (response.data.code === 200) {
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      fetchData(); // 刷新数据
    } else {
      ElMessage.error(response.data.msg || '保存失败');
    }
  } catch (error) {
    ElMessage.error('保存失败');
  }
};

const handleDelete = async (id) => {
  try {
    const response = await axios.delete(`http://localhost:9900/data/delete/${id}`);
    if (response.data.code === 200) {
      ElMessage.success('删除成功');
      fetchData(); // 刷新数据
    } else {
      ElMessage.error(response.data.msg || '删除失败');
    }
  } catch (error) {
    ElMessage.error('删除失败');
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.data-list-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
